<template>
    <div class="login-page">
    	<router-view></router-view>
        <div class="login-logo">
            <img class="login-logoImg mt30 mb20" src="../../assets/logo.png">
        </div>
        <div class="login-input">
			<div class="input_com mr20 ml20 pt20 pb20 border-b flex flex-start">
				<span>账号</span>:
				<input type="text" placeholder="请输入手机号/账号" v-model="form.mobile" class="ml20">
			</div>
			<div class="input_com mr20 ml20 pt20 pb20 border-b flex flex-start">
				<span>密码</span>:
				<input placeholder="请输入密码" type="password" v-model="form.user_pwd" class="ml20">
			</div>
			<div class="layout mt20 mb40 pl20 pr20">
				<router-link to="/login/forget" tag="span" class="change-password">忘记密码?</router-link>
				<router-link to="/login/register" tag="span" class="change-password">注册账号</router-link>
			</div>
			<button class="btn-button pt10 pb10" :class="{ on : boolean }" @click="submit">确定</button>
        </div>
        <div class="other fls16 ml30 mr30 pb30">
            <p class="other-p mb10">第三方登陆</p>
            <div class="other-box mt15">
                <div @click="weChat">
                	<i class="mb5 iconfont icon-weixin wechat"></i>           
                    <span>微信</span>
                </div>
                <!-- <div class="phone" @click="$router.push('/login/captcha')" style="background-color: pink;">
                    <i class="mb5 iconfont icon-QQ"></i>
                    <span>QQ</span>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
	import { signin } from '@/api/login';
	import { iosapp,loginJIM } from "@/utils";
    export default {
    	data()
    	{
    		return {
				verify  : false,
				showApp : window.sessionStorage.getItem('isapp'),
				form    : {
					mobile   : '',
					user_pwd : ''
    			}
    		}
    	},
    	computed:
		{
			boolean()
			{
				var boolean = false;

				this.verify = false;
				
 				if(!this.form.mobile || !this.form.user_pwd )
				{
					this.verify = false;
					boolean = false;
				}
				else
				{
					this.verify = true;
					boolean = true;
				}

				return boolean;
			}
		},
    	methods: {
    		submit()
    		{
    			if(!this.verify)
    				return;

    			signin(this.form).then(res => {
    				this.$store.dispatch("login", res.data[0]);
    				// loginJIM('13725713996','jiguang520')
    				this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect: '/'); 

    			})
    		},
    		weChat()
    		{
    			if(this.showApp == "1")
					iosapp('wechatLogin') 				
    			else
    				window.location.replace('https://fish.qidongwx.com/service/Thirdlogin/wchatPublicLogin');
    		}
    		
    	}
    }
</script>

<style lang="less">
	.login-page {
		background-color: #fff;
		.input_com {
			::-webkit-input-placeholder {
				color:#999;
			}
			span{
				font-size: 1rem;
				color: #333;
				font-weight: 600;
				width: 3rem;
				display: block;
				-moz-text-align-last:justify;
				text-align-last:justify;
			}
			span:after {
				content:'';
			    width: 100%;
			    overflow: hidden;
			    height: 0;
			}
			input{
				font-size: 1rem;
				color: #999;
			}
		}
		.change-password {
			text-align: right;
			display: block;
			color: #ff0036;
			font-size: 1rem;
		}
		.login-logoImg {
			height: 180/28rem;
			width: 164/28rem;
			display: block;
			margin-right: auto;
			margin-left: auto;
			object-fit: cover;
		}
		.login-btn {
			 width: 100%;
		}
		.other{
		 	margin-top: 5rem;
		}
		.other-box {
			// display: flex;
			// justify-content: space-evenly;
			text-align: center;
			i{
				display: block;
				font-size: 3rem;
			}
			span{
				font-size: 1rem;
				color: #999;
			}
		}
		.other-p {
			text-align: center;
			font-size: 28/28rem;
			color: #bbb;
			&:before{
				content: "";
				width: 90/28rem;
				height: 1px;
				background: #ddd;
				display: inline-block;
				vertical-align: middle;
				margin-right: 20/28rem;
			}
			&:after {
				content: "";
				width: 90/28rem;
				height: 1px;
				background: #ddd;
				display: inline-block;
				vertical-align: middle;
				margin-left: 20/28rem;
			}
		}
		.wechat {
			color: #50b674;
		}
		.phone {
			color: #108ee9;
		}
		.mint-cell-wrapper {
			background: transparent !important;
			border-bottom: 1px solid #fff;
		}
		.btn-button{
			display: block;
			width: 90%;
			margin: 0 auto;
			margin-top: 80/28rem;
			background-color: #ff7f9a;	
			color: rgba(255,255,255,.5);
			border-radius: 8px;
			font-size: 1rem;
		}
		.on{
			background-color:#ff0036;
			color: white;
		}
	}
</style>
